
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
/* 
.----. .-.   .-.  .--.  .-. .-..-.    .----. .----.  .----..-..----. .-.  .--.  .-. .-.
| {}  }|  `.'  | / {} \ | |/ / | |   /  {}  \| {}  }{ {__  | || {}  \| | / {} \ |  `| |
| .-. \| |\ /| |/  /\  \| |\ \ | |   \      /| {}  }.-._} }| ||     /| |/  /\  \| |\  |
`-' `-'`-' ` `-'`-'  `-'`-' `-'`-'    `----' `----' `----' `-'`----' `-'`-'  `-'`-' `-'

Made by: Luke Ruokaismaki
Version: 1.3.0
Repo: https://github.com/luke-rmaki/rmaki-obsidian
Built with PostCSS and Gulp


*/
:root {
  /* ---------------------------------------- Colors */
  --h-purple: 246;
  --s-purple: 28%;
  --l-purple: 48%;
  --h-black: 240;
  --s-black: 7%;
  --l-black: 12%;
  --h-white: 212;
  --s-white: 61%;
  --l-white: 91%;

  --purple: hsl(var(--h-purple), var(--s-purple), var(--l-purple));
  --black: hsl(var(--h-black), var(--s-black), var(--l-black));
  --accent: hsl(164, 68%, 72%);
  --white: hsl(var(--h-white), var(--s-white), var(--l-white));

  --white-dark-1: hsl(212, 61%, 86%);
  --white-dark-2: hsl(212, 61%, 81%);
  --white-dark-3: hsl(211, 19%, 60%);

  --black-light-1: hsl(240, 7%, 17%);
  --black-light-2: hsl(240, 7%, 22%);
  --black-light-3: hsl(240, 7%, 27%);

  --black-dark-1: hsl(240, 7%, 7%);

  --purple-dark-1: hsl(246, 28%, 43%);
  --purple-dark-2: hsl(246, 28%, 38%);
  --purple-dark-3: hsl(246, 28%, 33%);
  --purple-dark-4: hsl(246, 28%, 28%);
  --purple-dark-5: hsl(246, 28%, 23%);
  --purple-dark-6: hsl(246, 28%, 18%);

  --purple-light-1: hsl(246, 28%, 53%);
  --purple-light-2: hsl(246, 28%, 58%);
  --purple-light-3: hsl(246, 28%, 63%);

  --border: 0.5px solid var(--purple);
  --editor-background: var(--black-dark-1);
  --icon-normal: var(--purple);
  --icon-hover: var(--accent);
  --icon-accent: var(--accent);
  --text: var(--white);
  --text-mute: var(--white-dark-3);
  --popup-dark: var(--black-dark-1);
  --ribbon-background: var(--black-dark-1);
  --sidebar-background: var(--black);
  --scrollbar-bg: var(--purple);

  /* --------------------------------------------- Font */
  --font: "Fira Code", monospace;

  /* font sizes */
  --par: 0.9rem;
  --heading: 1.1rem;
  --small: 0.7rem;
}
.titlebar {
  background-color: hsl(240, 7%, 7%);
  background-color: var(--black-dark-1);
  border-bottom: 0.5px solid hsl(246, 28%, 48%);
  border-bottom: var(--border)
}
.titlebar .titlebar-text {
      color: hsl(212, 61%, 86%);
      color: var(--white-dark-1);
  }
.titlebar .titlebar-button {
      color: hsl(212, 61%, 81%);
      color: var(--white-dark-2);
  }
.workspace-tabs .workspace-tab-header-container {
  /* tab icon bar background */
  background-color: hsl(240, 7%, 7%);
  background-color: var(--tab-background)
}
.workspace-tabs .workspace-tab-header-container .is-before-active,
  .workspace-tabs .workspace-tab-header-container .is-after-active {
    background-color: hsl(240, 7%, 7%);
    background-color: var(--tab-background)
  }
.workspace-tabs .workspace-tab-header-container .is-before-active .workspace-tab-header-inner, .workspace-tabs .workspace-tab-header-container .is-after-active .workspace-tab-header-inner {
      background-color: hsl(240, 7%, 7%);
      background-color: var(--tab-background);
    }
.workspace-tabs .workspace-tab-header-container {

  /* all tabs */
}
.workspace-tabs .workspace-tab-header-container .workspace-tab-header {
    color: hsl(246, 28%, 48%);
    color: var(--icon-normal);
    background-color: hsl(240, 7%, 7%);
    background-color: var(--tab-background)
  }
.workspace-tabs .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner {
      background-color: hsl(240, 7%, 7%);
      background-color: var(--tab-background);
    }
.workspace-tabs .workspace-tab-header-container .workspace-tab-header:hover,
    .workspace-tabs .workspace-tab-header-container .workspace-tab-header:focus {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.workspace-tabs .workspace-tab-header-container {
  /* Active tab */
}
.workspace-tabs .workspace-tab-header-container .is-active {
    background-color: hsl(240, 7%, 12%) !important;
    background-color: var(--black) !important;
    color: hsl(164, 68%, 72%);
    color: var(--icon-hover)
  }
.workspace-tabs .workspace-tab-header-container .is-active .workspace-tab-header-inner {
      background-color: hsl(240, 7%, 12%) !important;
      background-color: var(--black) !important;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }
.workspace-tabs {
  background-color: hsl(240, 7%, 7%);
  background-color: var(--tab-background);
}
.nav-header .nav-action-button {
    color: hsl(246, 28%, 48%);
    color: var(--icon-normal)
  }
.nav-header .nav-action-button svg {
      fill: hsl(246, 28%, 48%);
      fill: var(--icon-normal)
    }
.nav-header .nav-action-button svg path {
        stroke: hsl(246, 28%, 48%);
        stroke: var(--icon-normal);
      }
.nav-header .nav-action-button:hover svg {
        fill: hsl(164, 68%, 72%);
        fill: var(--icon-hover)
      }
.nav-header .nav-action-button:hover svg path {
          stroke: hsl(164, 68%, 72%);
          stroke: var(--icon-hover);
        }
.nav-header .nav-action-button:hover,
    .nav-header .nav-action-button:focus {
      color: hsl(164, 68%, 72%);
      color: var(--icon-hover);
    }
.nav-header .nav-action-button.is-active {
      color: hsl(240, 7%, 7%);
      color: var(--black-dark-1);
      background: hsl(164, 68%, 72%);
      background: var(--accent);
    }
.nav-folder {
  /* Folder names */
}
.nav-folder .nav-folder-title .nav-folder-title-content {
    color: hsl(211, 19%, 60%);
    color: var(--text-mute);
    font-weight: bold;
  }
.nav-folder {

  /*  File names */
}
.nav-folder .nav-file .nav-file-title {
    color: hsl(211, 19%, 60%);
    color: var(--text-mute);
    font-style: italic;
  }
.nav-folder {

  /* Hover/focus */
}
.nav-folder .nav-folder-title:hover,
  .nav-folder .nav-folder-title:focus {
    background-color: hsl(240, 7%, 17%) !important;
    background-color: var(--explorer-hover) !important
  }
.nav-folder .nav-folder-title:hover .nav-folder-title-content, .nav-folder .nav-folder-title:focus .nav-folder-title-content {
      background-color: hsl(240, 7%, 17%);
      background-color: var(--explorer-hover);
      color: hsl(164, 68%, 72%) !important;
      color: var(--accent) !important;
    }
.nav-folder .nav-file:hover .nav-file-title, .nav-folder .nav-file:focus .nav-file-title {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
      background-color: hsl(240, 7%, 17%);
      background-color: var(--explorer-hover);
    }
.nav-folder {

  /* Active file */
}
.nav-folder .is-active {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--explorer-active-bg);
    color: hsl(240, 7%, 12%) !important;
    color: var(--black) !important
  }
.nav-folder .is-active:hover,
    .nav-folder .is-active:focus {
      background-color: hsl(164, 68%, 72%) !important;
      background-color: var(--explorer-active-bg) !important;
    }
/* Search input */
.search-input-container input {
    background-color: hsl(240, 7%, 7%);
    background-color: var(--black-dark-1);
    color: hsl(212, 61%, 91%);
    color: var(--white);
  }
.search-input-container .search-input-clear-button::before {
    color: hsl(164, 68%, 72%);
    color: var(--accent);
  }
.search-result-container .tree-item {
    /* Hover/focus */
  }
.search-result-container .tree-item:hover,
    .search-result-container .tree-item:focus {
      background-color: hsl(240, 7%, 17%);
      background-color: var(--explorer-hover)
    }
.search-result-container .tree-item:hover .tree-item-inner,
      .search-result-container .tree-item:hover .tree-item-self,
      .search-result-container .tree-item:focus .tree-item-inner,
      .search-result-container .tree-item:focus .tree-item-self {
        background-color: hsl(240, 7%, 17%);
        background-color: var(--explorer-hover);
        color: hsl(164, 68%, 72%);
        color: var(--accent);
      }
.search-result-container .tree-item:hover .tree-item-flair-outer .tree-item-flair, .search-result-container .tree-item:focus .tree-item-flair-outer .tree-item-flair {
          color: hsl(240, 7%, 12%);
          color: var(--black);
          background-color: hsl(164, 68%, 72%);
          background-color: var(--accent);
        }
.search-result-container .tree-item .tree-item-inner {
      color: hsl(211, 19%, 60%);
      color: var(--text-mute);
    }
.search-result-container .tree-item {
    /* Badge */
  }
.search-result-container .tree-item .tree-item-flair-outer .tree-item-flair {
        background-color: hsl(246, 28%, 48%);
        background-color: var(--purple);
        color: hsl(240, 7%, 12%);
        color: var(--black);
      }
.search-result-container .tree-item {

    /* Search result match */
  }
.search-result-container .tree-item .search-result-file-match {
      background-color: hsl(240, 7%, 12%);
      background-color: var(--sidebar-background)
    }
.search-result-container .tree-item .search-result-file-match .search-result-file-matched-text {
        background-color: hsl(246, 28%, 38%);
        background-color: var(--purple-dark-2);
        color: hsl(212, 61%, 91%);
        color: var(--white);
      }
:root {
  --tab-background: var(--black-dark-1);
  --explorer-active-bg: var(--accent);
  --explorer-active: var(--black);
  --explorer-hover: var(--black-light-1);
  --search-bar: var(--black-light-1);
  --search-hover: var(--purple);
}
.workspace-split.mod-left-split,
.workspace-split.mod-right-split {
  /* Main sidebar (on top of workspace-tabs) */
}
.workspace-split.mod-left-split .workspace-leaf, .workspace-split.mod-right-split .workspace-leaf {
    background-color: hsl(240, 7%, 12%);
    background-color: var(--sidebar-background);
  }
.workspace-split.mod-left-split .tree-item-self:hover,
    .workspace-split.mod-left-split .tree-item-self:focus,
    .workspace-split.mod-right-split .tree-item-self:hover,
    .workspace-split.mod-right-split .tree-item-self:focus {
      background-color: hsl(240, 7%, 17%);
      background-color: var(--explorer-hover);
    }
/* Starred content */
[data-type="starred"] .nav-file .nav-file-icon {
    color: hsl(246, 28%, 48%);
    color: var(--icon-normal);
  }
[data-type="starred"] .nav-file .nav-file-title-content {
    color: hsl(211, 19%, 60%);
    color: var(--text-mute);
  }
[data-type="starred"] .nav-file:hover,
  [data-type="starred"] .nav-file:focus {
    background-color: hsl(240, 7%, 17%);
    background-color: var(--explorer-hover)
  }
[data-type="starred"] .nav-file:hover *, [data-type="starred"] .nav-file:focus * {
      background-color: hsl(240, 7%, 17%) !important;
      background-color: var(--explorer-hover) !important;
    }
[data-type="starred"] .nav-file:hover .nav-file-icon, [data-type="starred"] .nav-file:focus .nav-file-icon {
      color: hsl(164, 68%, 72%);
      color: var(--icon-hover);
    }
[data-type="starred"] .nav-file:hover .nav-file-title-content, [data-type="starred"] .nav-file:focus .nav-file-title-content {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.side-dock-ribbon {
  background-color: hsl(240, 7%, 7%);
  background-color: var(--ribbon-background)
  /* Ribbon buttons */
}
.side-dock-ribbon .side-dock-ribbon-action {
    color: hsl(246, 28%, 48%);
    color: var(--icon-normal)
  }
.side-dock-ribbon .side-dock-ribbon-action:hover,
    .side-dock-ribbon .side-dock-ribbon-action:focus {
      color: hsl(164, 68%, 72%);
      color: var(--icon-hover);
    }
.side-dock-ribbon {
  /* Arrow */
}
.side-dock-ribbon .workspace-ribbon-collapse-btn {
    color: hsl(164, 68%, 72%);
    color: var(--icon-accent);
  }
.side-dock-ribbon.mod-left.is-collapsed,
  .side-dock-ribbon.mod-right.is-collapsed {
    border-right: 0.5px solid hsl(246, 28%, 48%);
    border-right: var(--border);
  }
.side-dock-ribbon {

  /* &.mod-right.is-collapsed {
    border-left: var(--border);
  } */
}
/* @import "./modules/left-side-bar.css"; */
:root {
  --editor-icons: var(--white-dark-3);
  --editor-title: var(--white);
  --line-number: var(--purple-dark-3);
  --current-line-bg: var(--black);
}
.mod-root {
   /* Workspace leaf is each editor: mod-active class is applied to the active editor */
}
.mod-root .workspace-leaf {
     /* Workspace leaf content has a data attribute for empty if there is no file */
  }
.mod-root .workspace-leaf .workspace-leaf-content {
       /* ----------------------------------- Editor header */
    }
.mod-root .workspace-leaf .workspace-leaf-content .view-header {
         /* Important used to avoid crazy nesting */
        background-color: hsl(240, 7%, 7%) !important;
        background-color: var(--editor-background) !important;
        border-top: none;
        border-bottom: 0.5px solid hsl(246, 28%, 48%) !important;
        border-bottom: var(--border) !important
      }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-header-title-container::after {
          background: hsl(240, 7%, 7%) !important;
          background: var(--editor-background) !important;
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-header {

         /* File icon */
      }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-header-icon {
          color: hsl(211, 19%, 60%);
          color: var(--editor-icons)
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-header-icon:hover {
            color: hsl(164, 68%, 72%);
            color: var(--icon-hover);
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-header-title {
          color: hsl(212, 61%, 91%);
          color: var(--editor-title);
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-header {

         /* Action icons */
      }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-action {
          color: hsl(211, 19%, 60%);
          color: var(--editor-icons)
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-header .view-action:hover {
            color: hsl(164, 68%, 72%);
            color: var(--icon-hover);
          }
.mod-root .workspace-leaf .workspace-leaf-content {

       /* ------------------------------------ Content */
    }
.mod-root .workspace-leaf .workspace-leaf-content .view-content {
        background-color: hsl(240, 7%, 7%);
        background-color: var(--editor-background)

         /* Empty window content */
      }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .empty-state-container {
          color: hsl(211, 19%, 60%);
          color: var(--text-mute)
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .empty-state-container .empty-state-action {
            color: hsl(211, 19%, 60%);
            color: var(--text-mute)
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .empty-state-container .empty-state-action:hover {
              color: hsl(164, 68%, 72%);
              color: var(--icon-hover);
            }
.mod-root .workspace-leaf .workspace-leaf-content .view-content {

         /* -------------------------------- Editor styles */
      }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {
          font-size: 0.9rem;
          font-size: var(--par)
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-cursors {
            z-index: 100;
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {

           /* Cursor insert mode */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-cursor, .mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-cursor {
            border-left: 1px solid hsl(164, 68%, 72%);
            border-left: 1px solid var(--accent);
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror, .mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-contentContainer {
            max-width: 70vw;
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {

           /* Cursor normal */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-fat-cursor .CodeMirror-cursor {
              background: hsl(164, 68%, 72%);
              background: var(--accent);
              z-index: 100;
            }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {
          
          /*  live preview */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-cursorLayer .cm-fat-cursor {
              background: hsl(164, 68%, 72%);
              background: var(--accent);

            }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {

           /* Gutters Desktop */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-gutters .CodeMirror-gutter {
            background-color: hsl(240, 7%, 7%);
            background-color: var(--editor-background);
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-linenumber {
            color: hsl(246, 28%, 33%);
            color: var(--line-number);
            font-size: 0.9rem;
            font-size: var(--par);
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {

           /* Gutters Mobile */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-gutters {
            background-color: hsl(240, 7%, 7%) !important;
            background-color: var(--editor-background) !important
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-gutters .cm-foldGutter {
              background: hsl(240, 7%, 7%);
              background: var(--editor-background);
              span[title="Unfold line"] {
                /* color: var(--purple);  doesn't work */
              }
            }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-gutters .cm-lineNumbers {
              background: hsl(240, 7%, 7%);
              background: var(--editor-background)
            }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .cm-gutters .cm-lineNumbers .cm-gutterElement {
                color: hsl(246, 28%, 33%);
                color: var(--line-number);
              }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view {

            /* Content styles */
           /* See _text-styles.scss */

           /* ------ Active line styles */
        }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-activeline {
            background-color: hsl(240, 7%, 12%);
            background-color: var(--current-line-bg)
          }
.mod-root .workspace-leaf .workspace-leaf-content .view-content .markdown-source-view .CodeMirror-activeline .CodeMirror-linenumber {
              color: hsl(164, 68%, 72%);
              color: var(--accent);
            }
/* 
  CodeMirror-line is the base line class
  Each element type class has the form .HyperMD-[element type]
    Nested in each element is a class .cm-formatting which styles the formatting markup
 */
:root {
  --heading-color: var(--purple);
  --formatting: var(--accent);
  --list: var(--purple);
}
/* ------------- BASE LINE STYLING */
.cm-content {
  font-family: "Fira Code", monospace;
  font-family: var(--font);
  max-width: 90vw !important;
}
.CodeMirror-line,
.cm-line {
  max-width: 90vw !important
}
.CodeMirror-line span, .cm-line span {
    color: hsl(212, 61%, 91%);
    color: var(--text);
  }
.CodeMirror-line,
.cm-line {

  /* ---- HEADINGS */
}
.CodeMirror-line.HyperMD-header .cm-header, .cm-line.HyperMD-header .cm-header {
      font-size: 1.1rem;
      font-size: var(--heading);
      color: hsl(246, 28%, 48%);
      color: var(--purple);
    }
.CodeMirror-line.HyperMD-header .cm-formatting, .cm-line.HyperMD-header .cm-formatting {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.CodeMirror-line,
.cm-line {

  /* ---- LIST */
}
.CodeMirror-line.HyperMD-list-line .cm-formatting, .cm-line.HyperMD-list-line .cm-formatting {
      color: hsl(246, 28%, 48%);
      color: var(--purple);
    }
.CodeMirror-line,
.cm-line {

  /* BOLD AND ITALICS */
}
.CodeMirror-line .cm-em,
  .CodeMirror-line .cm-strong,
  .cm-line .cm-em,
  .cm-line .cm-strong {
    color: hsl(246, 28%, 58%);
    color: var(--purple-light-2)
  }
.CodeMirror-line .cm-em.cm-formatting, .CodeMirror-line .cm-strong.cm-formatting, .cm-line .cm-em.cm-formatting, .cm-line .cm-strong.cm-formatting {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.CodeMirror-line,
.cm-line {

  /* HIGHLIGHT */
}
.CodeMirror-line .cm-formatting.cm-highlight, .cm-line .cm-formatting.cm-highlight {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--accent);
    color: hsl(240, 7%, 7%);
    color: var(--black-dark-1);
  }
.CodeMirror-line .cm-formatting + .cm-highlight, .cm-line .cm-formatting + .cm-highlight {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--accent);
    color: hsl(240, 7%, 7%);
    color: var(--black-dark-1);
  }
.CodeMirror-line .cm-highlight, .cm-line .cm-highlight {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--accent);
    color: hsl(240, 7%, 7%);
    color: var(--black-dark-1);
  }
.CodeMirror-line,
.cm-line {

  /* ---- QUOTE */
}
.CodeMirror-line.HyperMD-quote .cm-quote, .cm-line.HyperMD-quote .cm-quote {
      color: hsl(212, 61%, 91%);
      color: var(--text);
    }
.CodeMirror-line.HyperMD-quote .cm-formatting, .cm-line.HyperMD-quote .cm-formatting {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.CodeMirror-line,
.cm-line {

  /* ---- CODE BLOCK */
}
.CodeMirror-line.HyperMD-codeblock, .cm-line.HyperMD-codeblock {
    background-color: hsl(240, 7%, 12%);
    background-color: var(--black);
    color: hsl(212, 61%, 91%);
    color: var(--white)
  }
.CodeMirror-line.HyperMD-codeblock.HyperMD-codeblock-begin .cm-formatting, .CodeMirror-line.HyperMD-codeblock.HyperMD-codeblock-end .cm-formatting, .cm-line.HyperMD-codeblock.HyperMD-codeblock-begin .cm-formatting, .cm-line.HyperMD-codeblock.HyperMD-codeblock-end .cm-formatting {
        color: hsl(164, 68%, 72%);
        color: var(--accent);
      }
.CodeMirror-line,
.cm-line {

  /* ---- HR */
}
.CodeMirror-line.HyperMD-hr .cm-hr, .cm-line.HyperMD-hr .cm-hr {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
.CodeMirror-line,
.cm-line {

  /* ---- LINKS */
}
.CodeMirror-line span.cm-formatting-link, .cm-line span.cm-formatting-link {
    color: hsl(246, 28%, 48%);
    color: var(--purple);
  }
.CodeMirror-line .cm-formatting-link + .cm-hmd-internal-link, .cm-line .cm-formatting-link + .cm-hmd-internal-link {
    color: hsl(164, 68%, 72%);
    color: var(--accent);
  }
.CodeMirror-line,
.cm-line {

  /* ---- FRONTMATTER */
}
.CodeMirror-line .cm-hmd-frontmatter, .cm-line .cm-hmd-frontmatter {
    font-size: 0.7rem;
    font-size: var(--small);
    color: hsl(211, 19%, 60%);
    color: var(--text-mute);
  }
.markdown-preview-view,
.is-live-preview {
  font-size: 0.9rem;
  font-size: var(--par);
  font-family: var(--font-family)
}
.markdown-preview-view h1,
  .markdown-preview-view h5,
  .markdown-preview-view .HyperMD-header-1 .cm-header-1,
  .is-live-preview h1,
  .is-live-preview h5,
  .is-live-preview .HyperMD-header-1 .cm-header-1 {
    color: hsl(164, 68%, 72%);
    color: var(--accent);
  }
.markdown-preview-view h3,
  .markdown-preview-view .HyperMD-header-3 .cm-header-3,
  .is-live-preview h3,
  .is-live-preview .HyperMD-header-3 .cm-header-3 {
    color: hsl(246, 28%, 63%);
    color: var(--purple-light-3);
    font-weight: normal;
  }
.markdown-preview-view h4,
  .markdown-preview-view .HyperMD-header-4 .cm-header-4,
  .is-live-preview h4,
  .is-live-preview .HyperMD-header-4 .cm-header-4 {
    color: hsl(246, 28%, 48%);
    color: var(--purple);
    font-weight: normal;
    font-style: italic;
  }
.markdown-preview-view h2,
  .markdown-preview-view h6,
  .markdown-preview-view .HyperMD-header-2 .cm-header-2,
  .markdown-preview-view .HyperMD-header-6 .cm-header-6,
  .is-live-preview h2,
  .is-live-preview h6,
  .is-live-preview .HyperMD-header-2 .cm-header-2,
  .is-live-preview .HyperMD-header-6 .cm-header-6 {
    color: hsl(246, 28%, 48%);
    color: var(--purple);
    font-style: italic;
  }
.markdown-preview-view h2,
  .markdown-preview-view .HyperMD-header-2 .cm-header-2,
  .is-live-preview h2,
  .is-live-preview .HyperMD-header-2 .cm-header-2 {
    border-bottom: 1px solid hsl(164, 68%, 72%);
    border-bottom: 1px solid var(--accent);
  }
.markdown-preview-view p,
  .markdown-preview-view span,
  .markdown-preview-view ul,
  .markdown-preview-view ol,
  .is-live-preview p,
  .is-live-preview span,
  .is-live-preview ul,
  .is-live-preview ol {
    color: hsl(212, 61%, 91%);
    color: var(--text);
  }
.markdown-preview-view mark,
  .markdown-preview-view .cm-line .cm-highlight,
  .is-live-preview mark,
  .is-live-preview .cm-line .cm-highlight {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--accent);
    color: hsl(240, 7%, 7%);
    color: var(--black-dark-1);
  }
.markdown-preview-view a, .is-live-preview a {
    color: hsl(212, 61%, 91%);
    color: var(--white);
    text-decoration: underline;
    -webkit-text-decoration-color: hsl(164, 68%, 72%) !important;
            text-decoration-color: hsl(164, 68%, 72%) !important;
    -webkit-text-decoration-color: var(--accent) !important;
            text-decoration-color: var(--accent) !important
  }
.markdown-preview-view a:hover, .is-live-preview a:hover {
      background: hsl(164, 68%, 72%);
      background: var(--accent);
      color: hsl(240, 7%, 12%);
      color: var(--black);
    }
.markdown-preview-view,
.is-live-preview {

  /* & .cm-quote-1:not(.cm-formatting)  */
}
.markdown-preview-view blockquote,
  .markdown-preview-view .HyperMD-quote,
  .is-live-preview blockquote,
  .is-live-preview .HyperMD-quote {
    border: solid 1px hsl(246, 28%, 48%);
    border: solid 1px var(--purple);
    border-left-width: 5px;
    color: hsl(212, 61%, 91%);
    color: var(--text);
  }
.markdown-preview-view table th, .is-live-preview table th {
    color: hsl(164, 68%, 72%);
    color: var(--accent);
  }
.markdown-preview-view hr, .is-live-preview hr {
    border-color: hsl(246, 28%, 33%);
    border-color: var(--purple-dark-3);
  }
.markdown-preview-view,
.is-live-preview {

  /* Display container */
}
.markdown-preview-view .markdown-preview-section, .is-live-preview .markdown-preview-section {
    max-width: 1000px !important;
  }
/* @import "./modules/right-side-bar.css"; */
.status-bar {
  border-top: 0.5px solid hsl(246, 28%, 48%);
  border-top: var(--border);
  background-color: hsl(240, 7%, 7%);
  background-color: var(--editor-background)
}
.status-bar .status-bar-item {
    color: hsl(211, 19%, 60%);
    color: var(--text-mute)
  }
.status-bar .status-bar-item.mod-clickable:hover {
      color: hsl(164, 68%, 72%);
      color: var(--accent);
    }
body {
  font-family: "Fira Code", monospace !important;
  font-family: var(--font) !important;
}
.tooltip {
  background: hsl(164, 68%, 72%);
  background: var(--accent);
  color: hsl(240, 7%, 7%);
  color: var(--black-dark-1);
}
.workspace-leaf-resize-handle {
  background-color: hsl(246, 28%, 38%);
  background-color: var(--purple-dark-2);
  width: 2px
}
.workspace-leaf-resize-handle:hover, .workspace-leaf-resize-handle:focus {
    background-color: hsl(164, 68%, 72%);
    background-color: var(--accent);
  }
